<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Add and Remove Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Add and Remove Layout</h2>
	<p>Click the buttons below to add or remove region panel of layout.</p>
	<textarea id="EditDiv1" style="width:300px;height:50px"></textarea>
	<div class="easyui-tabs easyui-resizable" data-options="tabWidth:112" style="width:100%;height:auto;">
		<div title="source" style="padding:10px">
			<p>Home Content.</p>
			
		</div>
		<div title="design-mode" style="padding:5px;width:auto;height:auto;">
			<div id="cc" class="easyui-layout" style="width:auto;height:700px;">
				<div data-options="region:'north'" style="height:30px"></div>
				<div data-options="region:'south',split:true" style="height:50px;"></div>
				<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
				<div data-options="region:'west',split:true" title="West" style="width:150px;padding-left:2px;">
					<div style="position:relative;width:115px;height:900px; border:1px solid #ccc;top:20px;">
					<div class="dragitem" component_id="Panel" style="border:1px solid #ccc;width:110px;height:40px;">Panel(可拖拽)</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="tree" style="border:1px solid #ccc;width:110px;height:40px;">Tree(可拖拽)</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="datagrid" style="border:1px solid #ccc;width:110px;height:40px;">DataGrid(可拖拽)</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="datebox" style="border:1px solid #ccc;width:110px;height:40px;">datebox(可拖拽)</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="combobox" style="border:1px solid #ccc;width:110px;height:40px;">combobox(可拖拽)</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="button" style="border:1px solid #ccc;width:110px;height:40px;">button(可拖拽)</div>
				</div>
				</div>
				<div id="EditDiv" class="dragContainer" drag-options="div" style="position:relative;border:1px solid #ccc;" data-options="region:'center',title:'EditDiv'">
					
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
	
		var proxy = null;var component_id = '';
		$(function(){
			// 初始化可拖拽代理区
			$('.dragitem').draggable({
				 revert:true,
				 deltaX:2,
				 deltaY:2,
				 proxy:function(source){
					 var n = $('<div style="position:absolute"></div>');
					 var com = n.html("sssss").appendTo('body');
					 $.parser.parse(com[0]);
					 component_id = $(source).attr('component_id');
					 var com = n.html($.ajax({url:component_id+".html",async:false}).responseText).appendTo('body');
					 $.parser.parse(com[0]);
					 return proxy=n;
				 },
				 onStopDrag:function(e){
					// 当代理拖拽停止时,将拖动的组件添加到编辑区
					var DragScopes = $('#EditDiv [sid]').add($('#EditDiv'));
					var parentdiv = findParentInScope(proxy[0],DragScopes);
					if(parentdiv){
						var text = $.ajax({url:component_id+".html",async:false}).responseText;
						var v = $(text);v.appendTo($(parentdiv));$.parser.parse(v[0]);
						v[0].style.position = 'absolute';
						v[0].style.left = ($(proxy[0]).offset().left -  $(parentdiv).offset().left) + "px";
						v[0].style.top = ($(proxy[0]).offset().top -  $(parentdiv).offset().top) + "px";
						v.draggable({disabled:false,onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag});
						v.resizable({});
					}
				 }
			 });
		});
		
		/**
		 * 开始拖拽组件边框变红,变层为最高层目的是不被其他组件遮挡住
		 */
		function onBeforeDrag(e){
			var d = e.data;
			$(d.target).css("z-index","9999");
			d.target.style.borderColor="red";
			//$('#EditDiv1').text("["+$(d.target).parents("[sid]").size()+"]");
			$(d.target).parents("[sid]").draggable({disabled:true,onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag});
			$('#EditDiv1').text(d.target.sid);
		}
		/**
		 *  当停止拖拽的时候,判断是否拖拽组件或容器以及逃离了父容器的边界，
		 *	如果脱离，则选择到达的最小容器作为其新父容器
		 */
		function onStopDrag(e){
			var d = e.data;
			$(d.target).css("z-index","0");
			d.target.style.borderColor="#ccc";
			$(d.target).parents("[sid]").draggable({disabled:false,onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag});
			var DragScopes = $('#EditDiv [sid]').add($('#EditDiv'));
			var parentdiv = findParentInScope(d.target,DragScopes);
			if(parentdiv){
				d.target.style.left = ($(d.target).offset().left -  $(parentdiv).offset().left) + "px";
				d.target.style.top = ($(d.target).offset().top -  $(parentdiv).offset().top) + "px";
				var ff = parentdiv.appendChild(d.target);
			}	
			
		};
		/** 
		  *	返回最小包含父容器方法
		  * 查看target元素落在了什么容器范围之内,如果多个容器范围都包含它则取小的那一个容器.
		  * @target 拖动元素
		  * @containers 用于寻找是否位置包含拖动元素target位置的容器集合
		  * @return 返回最小(宽度最小)包含父容器
		  */
		function findParentInScope(target,containers){
			var parentdiv = null;
			containers.each(function(){
				if(target!=this){
					if($(this).offset().left < $(target).offset().left)
					if($(this).offset().left + $(this).width() > $(target).offset().left + $(target).outerWidth())
					if($(this).offset().top < $(target).offset().top)
					if(($(this).offset().top + $(this).height()) > ($(target).offset().top + $(target).outerHeight()))
					if(parentdiv == null || $(this).width()<$(parentdiv).width()){
						parentdiv = this;
					}
			}});
			return parentdiv;
		}
		
	</script>
</body>
</html>